<template>
  <div class="rank">
    <div class="e-header">
      <div class="e-h-row">
        <div class="e-h-title"><i class="iconfont icon-paiming"></i>排行榜</div>
        <div class="e-h-btn" @click="reLoadRank" v-if="$store.oj.premission.includes('manage:rank')">刷新排名</div>
      </div>
    </div>
    <n-tabs class="n-tabs" type="segment" animated size="small" v-model:value="tabName">
      <n-tab-pane name="ACM" tab="ACM">
        <!-- <div class="search">
          <n-input class="search-input" placeholder="搜索" round size="small" v-model:value="ACMusername">
            <template #suffix>
              <i class="iconfont icon-sousuo" @click="ACMParams.username = ACMusername"></i>
            </template>
</n-input>
</div> -->
        <rankList :list="ACMList" :listType="'ACM'" v-loading="rankLoadingACM"></rankList>
        <div class="footer">
          <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small
            layout="prev, pager, next,sizes" :total="Number(ACMList.total)" v-model:current-page="ACMParams.pageNum"
            v-model:page-size="ACMParams.pageSize" />
        </div>
      </n-tab-pane>
      <n-tab-pane name="OI" tab="OI">
        <!-- <div class="search">
          <n-input
            class="search-input"
            placeholder="搜索"
            round
            size="small"
            v-model:value="OIusername"
          >
            <template #suffix>
              <i
                class="iconfont icon-sousuo"
                @click="OIParams.username = OIusername"
              ></i>
            </template>
          </n-input>
        </div> -->
        <rankList :list="OIList" :listType="'OI'" v-loading="rankLoadingOI"></rankList>
        <div class="footer">
          <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small
            layout="prev, pager, next,sizes" :total="Number(OIList.total)" v-model:current-page="OIParams.pageNum"
            v-model:page-size="OIParams.pageSize" />
        </div>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import rankList from "@/components/ojComponents/rank/rankList.vue";
import {
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { getACMRankListAPI, getOIRankListAPI, reLoadACMAPI, reLoadOIAPI } from "@/api/ojAPI/ojAPI";


export default defineComponent({
  setup() {
    onMounted(() => {
      getACMRankList();
      getOIRankList();
      getRankList();
    });
    onUnmounted(() => {
      clearTimeout(timer.value);
    });

    const rankLoadingACM = ref(true)
    const rankLoadingOI = ref(true)
    let time = null

    //ACM
    const ACMList = reactive({
      records: [],
      total: 10,
    });
    const ACMParams = reactive({
      username: "",
      pageNum: 1,
      pageSize: 20,
    });
    const getACMRankList = async () => {
      await getACMRankListAPI(ACMParams)
        .then((res) => {
          if (res.data.code === 200) {
            Object.assign(ACMList, res.data.data);
            rankLoadingACM.value = false
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const ACMusername = ref("");
    watch(ACMParams, (newV, oldV) => {
      getACMRankList();
    });
    watch(ACMusername, (newV, oldV) => {
      if (newV.length == 0) {
        ACMParams.username = ACMusername;
      }
    });

    //OI
    const OIList = reactive({
      records: [],
      total: 10,
    });
    const OIParams = reactive({
      username: "",
      pageNum: 1,
      pageSize: 20,
    });
    const getOIRankList = async () => {
      await getOIRankListAPI(OIParams)
        .then((res) => {
          if (res.data.code === 200) {
            Object.assign(OIList, res.data.data);
            rankLoadingOI.value = false
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const OIusername = ref("");
    watch(OIParams, (newV, oldV) => {
      getOIRankList();
    });
    watch(OIusername, (newV, oldV) => {
      if (newV.length == 0) {
        OIParams.username = OIusername;
      }
    });

    const timer = ref(null);
    const getRankList = async () => {
      if (timer.value) {
        clearTimeout(timer.value);
      }
      if (tabName.value === "ACM") {
        timer.value = setTimeout(() => {
          getACMRankList();
          getRankList();
        }, 10000);
      } else {
        timer.value = setTimeout(() => {
          getOIRankList();
          getRankList();
        }, 10000);
      }
    };
    const tabName = ref("ACM");
    watch(tabName, (newV, oldV) => {
      clearTimeout(timer.value);
      if (newV === "ACM") {
        getACMRankList();
      } else {
        getOIRankList();
      }
      getRankList();
    });

    const reLoadRank = () => {
      if (time) {
        clearTimeout(time)
        time = null
      }
      time = setTimeout(() => {
        if (tabName.value == 'ACM') {
          rankLoadingACM.value = true
          reLoadACM()
        } else {
          rankLoadingOI.value = true
          reLoadOI()
        }
      }, 300)
    }
    const reLoadACM = async () => {
      try {
        const response = await reLoadACMAPI()
        const { code, data, msg } = response.data
        if (code == 200) {
          getACMRankList()
        }
      } catch (err) {
        console.log(err);
      }
    }
    const reLoadOI = async () => {
      try {
        const response = await reLoadOIAPI()
        const { code, data, msg } = response.data
        if (code == 200) {
          getOIRankList()
        }
      } catch (err) {
        console.log(err);
      }
    }

    return {
      ACMList,
      ACMParams,
      getACMRankList,
      ACMusername,
      OIList,
      OIParams,
      getOIRankList,
      OIusername,
      tabName,
      rankLoadingOI,
      rankLoadingACM,
      reLoadRank
    };
  },
});
</script>

<style lang="less" scoped>
.rank {
  width: 95%;
  padding-top: 10px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 10px;

  .e-header {
    width: 100%;
    height: 10%;

    .e-h-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .e-h-title {
        font-size: 22px;
        font-weight: 600;
        color: #555;

        .iconfont {
          font-weight: normal;
          font-size: 24px;
        }
      }

      .e-h-btn {
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #6e6e6e;
        cursor: pointer;
        transition: all 0.3s ease-in-out;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .n-tabs {
    margin: 20px auto 0 auto;

    .search {
      display: flex;
      width: 100%;
      height: 35px;

      .search-input {
        width: 20%;
        margin: auto 3% auto auto;
      }
    }

    .footer {
      width: 100%;
      display: flex;

      .pagination {
        margin: auto 3% auto auto;
      }
    }
  }
}
</style>
